<template>
	<view class="person-container">
		<!-- 顶部用户信息区域 -->
		<view class="user-header">
			<view class="user-info">
				<view class="avatar-section">
					<u-avatar
						:src="userInfo.avatar"
						size="80"
						shape="circle"
						:defaultSrc="defaultAvatar"
					></u-avatar>
				</view>
				<view class="user-details">
					<view class="username">{{ userInfo.nickname || 'u8259' }}</view>
					<view class="member-tag">
						<image src="/static/profile/会员中心.png" class="star-icon" mode="aspectFit"></image>
						<text class="tag-text">银卡会员</text>
					</view>
				</view>
			</view>
			<view class="header-actions">
				<view class="action-btn" @click="goToDailySign">
					<text class="action-text">📅</text>
				</view>
				<view class="action-btn" @click="goToMessage">
					<text class="action-text">💬</text>
				</view>
				<view class="action-btn" @click="goToSettings">
					<image src="/static/profile/系统设置.png" class="action-icon" mode="aspectFit"></image>
				</view>
			</view>
		</view>

		<!-- 用户数据统计 -->
		<view class="stats-section">
			<view class="stat-item">
				<text class="stat-number">{{ userInfo.balance || '0' }}</text>
				<text class="stat-label">余额</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ userInfo.points || '10' }}</text>
				<text class="stat-label">积分</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ userInfo.coupons || '4' }}</text>
				<text class="stat-label">优惠券</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ userInfo.favorites || '2' }}</text>
				<text class="stat-label">收藏</text>
			</view>
		</view>

		<!-- VIP专区 -->
		<view class="vip-section">
			<view class="vip-content">
				<view class="vip-info">
					<view class="vip-title">VIP 专享</view>
					<view class="vip-desc">立享1种专属特权,最低100元/天</view>
				</view>
				<view class="vip-action">
					<u-button 
						type="warning" 
						text="立即开通" 
						size="mini"
						@click="openVip"
						:custom-style="vipButtonStyle"
					></u-button>
				</view>
			</view>
		</view>

		<!-- 我的订单 -->
		<view class="order-section">
			<view class="section-header">
				<text class="section-title">我的订单</text>
				<view class="view-all" @click="viewAllOrders">
					<text class="view-all-text">全部订单</text>
					<text class="arrow-text">></text>
				</view>
			</view>
			<view class="order-types">
				<view class="order-type-item" @click="goToOrders('pending')">
					<view class="type-icon">
						<image src="/static/profile/待付款.png" class="custom-icon" mode="aspectFit"></image>
					</view>
					<text class="type-text">待付款</text>
				</view>
				<view class="order-type-item" @click="goToOrders('shipping')">
					<view class="type-icon">
						<image src="/static/profile/待发货.png" class="custom-icon" mode="aspectFit"></image>
					</view>
					<text class="type-text">待发货</text>
				</view>
				<view class="order-type-item" @click="goToOrders('receiving')">
					<view class="type-icon">
						<image src="/static/profile/待收货.png" class="custom-icon" mode="aspectFit"></image>
					</view>
					<text class="type-text">待收货</text>
				</view>
				<view class="order-type-item" @click="goToOrders('completed')">
					<view class="type-icon">
						<image src="/static/profile/已完成.png" class="custom-icon" mode="aspectFit"></image>
					</view>
					<text class="type-text">已完成</text>
				</view>
				<view class="order-type-item" @click="goToOrders('refund')">
					<view class="type-icon">
						<image src="/static/profile/退款.png" class="custom-icon" mode="aspectFit"></image>
					</view>
					<text class="type-text">退款/退货</text>
				</view>
			</view>
		</view>

		<!-- 分销中心和积分商城 -->
		<view class="feature-section">
			<view class="feature-card distribution-card" @click="goToDistribution">
				<view class="feature-content">
					<view class="feature-info">
						<text class="feature-title">分销中心</text>
						<text class="feature-desc">分享转化获佣金</text>
					</view>
					<view class="feature-icon">
						<image src="/static/icons/分销中心.png" class="feature-custom-icon" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="feature-card points-card" @click="goToPointsMall">
				<view class="feature-content">
					<view class="feature-info">
						<text class="feature-title">积分商城</text>
						<text class="feature-desc">攒积分兑好礼</text>
					</view>
					<view class="feature-icon">
						<image src="/static/icons/积分商城.png" class="feature-custom-icon" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 服务与工具 -->
		<view class="services-section">
			<view class="section-header">
				<text class="section-title">服务与工具</text>
			</view>
			<view class="services-grid">
				<view class="service-item" @click="goToMemberCenter">
					<view class="service-icon">
						<image src="/static/profile/会员中心.png" class="custom-icon" mode="aspectFit"></image>
					</view>
					<text class="service-text">会员中心</text>
				</view>
				<view class="service-item" @click="goToCouponCenter">
					<view class="service-icon">
						<image src="/static/profile/领券中心.png" class="custom-icon" mode="aspectFit"></image>
					</view>
					<text class="service-text">领券中心</text>
				</view>
				<view class="service-item" @click="goToAddress">
					<view class="service-icon">
						<image src="/static/profile/地址管理.png" class="custom-icon" mode="aspectFit"></image>
					</view>
					<text class="service-text">地址管理</text>
				</view>
				<view class="service-item" @click="goToFootprint">
					<view class="service-icon">
						<image src="/static/profile/我的-我的足迹.png" class="custom-icon" mode="aspectFit"></image>
					</view>
					<text class="service-text">我的足迹</text>
				</view>
				<view class="service-item" @click="goToLanguage">
					<view class="service-icon">
						<image src="/static/profile/切换语言.png" class="custom-icon" mode="aspectFit"></image>
					</view>
					<text class="service-text">切换语言</text>
				</view>
				<view class="service-item" @click="goToCustomerService">
					<view class="service-icon">
						<image src="/static/profile/官方客服.png" class="custom-icon" mode="aspectFit"></image>
					</view>
					<text class="service-text">官方客服</text>
				</view>
				<view class="service-item" @click="goToMerchant">
					<view class="service-icon">
						<image src="/static/profile/商家入驻.png" class="custom-icon" mode="aspectFit"></image>
					</view>
					<text class="service-text">商家入驻</text>
				</view>
				<view class="service-item" @click="goToSettings">
					<view class="service-icon">
						<image src="/static/profile/系统设置.png" class="custom-icon" mode="aspectFit"></image>
					</view>
					<text class="service-text">系统设置</text>
				</view>
			</view>
		</view>

		<!-- 推荐商品 -->
		<view class="recommendation-section">
			<view class="section-header">
				<view class="recommend-title">
					<text class="heart-text">❤️</text>
					<text class="title-text">你可能还喜欢</text>
					<text class="heart-text">❤️</text>
				</view>
			</view>
			<view class="recommendation-products">
				<view class="product-item" @click="goToProduct">
					<view class="product-image">
						<u-image src="/static/balance/口红.png" width="120" height="120" radius="8"></u-image>
					</view>
					<text class="product-name">时尚口红</text>
					<text class="product-price">¥299</text>
				</view>
				<view class="product-item" @click="goToProduct">
					<view class="product-image">
						<u-image src="/static/balance/口红.png" width="120" height="120" radius="8"></u-image>
					</view>
					<text class="product-name">精美配饰</text>
					<text class="product-price">¥199</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				avatar: '',
				nickname: 'u8259',
				balance: '0',
				points: '10',
				coupons: '4',
				favorites: '2'
			},
			defaultAvatar: '/static/logo.png',
			vipButtonStyle: {
				backgroundColor: '#ffd700',
				color: '#333',
				borderRadius: '20rpx',
				fontSize: '24rpx',
				fontWeight: '500',
				width: '120rpx',
				height: '60rpx'
			}
		}
	},
	onLoad() {
		// 页面加载时获取用户信息
		this.loadUserInfo();
	},
	methods: {
		// 加载用户信息
		loadUserInfo() {
			const storedUserInfo = uni.getStorageSync('userInfo');
			if (storedUserInfo) {
				this.userInfo = { ...this.userInfo, ...storedUserInfo };
			}
		},
		
		// 跳转到消息页面
		goToMessage() {
			uni.navigateTo({
				url: '/pages/message/message'
			});
		},
		
		// 跳转到设置页面
		goToSettings() {
			uni.navigateTo({
				url: '/pages/settings/settings'
			});
		},
		
		// 开通VIP
		openVip() {
			uni.showToast({
				title: 'VIP功能开发中',
				icon: 'none'
			});
		},
		
		// 查看全部订单
		viewAllOrders() {
			uni.navigateTo({
				url: '/pages/order/order-list'
			});
		},
		
		// 跳转到订单页面
		goToOrders(status) {
			uni.navigateTo({
				url: `/pages/order/order-list?status=${status}`
			});
		},
		
		// 跳转到分销中心
		goToDistribution() {
			uni.navigateTo({
				url: '/pages/affiliateApplication/affiliateApplication'
			});
		},
		
		// 跳转到积分商城
		goToPointsMall() {
			uni.navigateTo({
				url: '/pages/pointsMall/pointsMall'
			});
		},
		
		// 跳转到会员中心
		goToMemberCenter() {
			uni.navigateTo({
				url: '/pages/member/member'
			});
		},
		
		// 跳转到领券中心
		goToCouponCenter() {
			uni.navigateTo({
				url: '/pages/getCouponCenter/getCouponCenter'
			});
		},
		
		// 跳转到地址管理
		goToAddress() {
			uni.navigateTo({
				url: '/pages/address/address'
			});
		},
		
		// 跳转到我的足迹
		goToFootprint() {
			uni.navigateTo({
				url: '/pages/footprint-list/footprint-list'
			});
		},
		
		// 跳转到语言设置
		goToLanguage() {
			uni.navigateTo({
				url: '/pages/language-settings/language-settings'
			});
		},
		
		// 跳转到客服
		goToCustomerService() {
			uni.navigateTo({
				url: '/pages/customer-service/customer-service'
			});
		},
		
		// 跳转到商家入驻
		goToMerchant() {
			uni.showToast({
				title: '商家入驻功能开发中',
				icon: 'none'
			});
		},
		
		// 跳转到商品详情
		goToProduct() {
			uni.navigateTo({
				url: '/pages/product/detail'
			});
		},
		
		// 跳转到每日签到页面
		goToDailySign() {
			uni.navigateTo({
				url: '/pages/dailyMission/dailyMission'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.person-container {
	min-height: 100vh;
	background-color: #f8f9fa;
	padding-bottom: 120rpx;
}

.user-header {
	background-color: #fff;
	padding: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	.user-info {
		display: flex;
		align-items: center;
		
		.avatar-section {
			margin-right: 20rpx;
		}
		
		.user-details {
			.username {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
				margin-bottom: 8rpx;
			}
			
			.member-tag {
				display: flex;
				align-items: center;
				
				.tag-text {
					font-size: 22rpx;
					color: #4facfe;
					margin-left: 6rpx;
					background-color: #f0f8ff;
					padding: 4rpx 12rpx;
					border-radius: 12rpx;
				}
			}
		}
	}
	
	.header-actions {
		display: flex;
		gap: 20rpx;
		
		.action-btn {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

.stats-section {
	background-color: #fff;
	margin-top: 2rpx;
	padding: 30rpx;
	display: flex;
	justify-content: space-around;
	
	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.stat-number {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 8rpx;
		}
		
		.stat-label {
			font-size: 24rpx;
			color: #666;
		}
	}
}

.vip-section {
	background: linear-gradient(135deg, #2c3e50, #34495e);
	margin: 20rpx;
	border-radius: 16rpx;
	
	.vip-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		
		.vip-info {
			.vip-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #fff;
				margin-bottom: 8rpx;
			}
			
			.vip-desc {
				font-size: 22rpx;
				color: #bdc3c7;
			}
		}
		
		.vip-action {
			// 按钮样式在data中定义
		}
	}
}

.order-section {
	background-color: #fff;
	margin: 0 20rpx 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
	
	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}
		
		.view-all {
			display: flex;
			align-items: center;
			
			.view-all-text {
				font-size: 24rpx;
				color: #999;
				margin-right: 8rpx;
			}
		}
	}
	
	.order-types {
		display: flex;
		justify-content: space-around;
		
		.order-type-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.type-icon {
				margin-bottom: 12rpx;
			}
			
			.type-text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
}

.feature-section {
	display: flex;
	gap: 20rpx;
	margin: 0 20rpx 20rpx;
	
	.feature-card {
		flex: 1;
		border-radius: 16rpx;
		overflow: hidden;
		
		&.distribution-card {
			background: linear-gradient(135deg, #ff6b35, #f7931e);
		}
		
		&.points-card {
			background: linear-gradient(135deg, #667eea, #764ba2);
		}
		
		.feature-content {
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.feature-info {
				flex: 1;
				
				.feature-title {
					font-size: 28rpx;
					font-weight: 500;
					color: #fff;
					margin-bottom: 8rpx;
					display: block;
				}
				
				.feature-desc {
					font-size: 22rpx;
					color: rgba(255, 255, 255, 0.8);
					display: block;
				}
			}
			
			.feature-icon {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}

.services-section {
	background-color: #fff;
	margin: 0 20rpx 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
	
	.section-header {
		margin-bottom: 30rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}
	}
	
	.services-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30rpx;
		
		.service-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.service-icon {
				margin-bottom: 12rpx;
			}
			
			.service-text {
				font-size: 22rpx;
				color: #666;
				text-align: center;
			}
		}
	}
}

.recommendation-section {
	background-color: #fff;
	margin: 0 20rpx;
	border-radius: 16rpx;
	padding: 30rpx;
	
	.section-header {
		margin-bottom: 30rpx;
		
		.recommend-title {
			display: flex;
			align-items: center;
			justify-content: center;
			
			.title-text {
				font-size: 28rpx;
				color: #333;
				margin: 0 20rpx;
			}
		}
	}
	
	.recommendation-products {
		display: flex;
		gap: 20rpx;
		
		.product-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.product-image {
				margin-bottom: 12rpx;
			}
			
			.product-name {
				font-size: 24rpx;
				color: #333;
				margin-bottom: 8rpx;
			}
			
			.product-price {
				font-size: 24rpx;
				color: #ff4757;
				font-weight: 500;
			}
		}
	}
}

.custom-icon {
	width: 56rpx;
	height: 56rpx;
}

.feature-custom-icon {
	width: 64rpx;
	height: 64rpx;
}

.star-icon {
	width: 24rpx;
	height: 24rpx;
}

.action-icon {
	width: 40rpx;
	height: 40rpx;
}

.action-text {
	font-size: 24rpx;
	color: #666;
}

.arrow-text {
	font-size: 24rpx;
	color: #999;
	font-weight: bold;
}

.heart-text {
	font-size: 28rpx;
	color: #ff4757;
}
</style> 